<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2-4</title>
    <style type="text/css">
      #bt{
		  width:100px;
		  height:30px;
		  background-color: yellow;
		  border:0px solid;
		  margin-left:200px;
		  margin-right: 200px;
	  }
	  #div{
		  width:500px;
		  height: 500px;
		  border: 1px solid #000000;
	  }
	  .opt{
		  background-color: #757575;
		  opacity: 0.8f;
	  }
	  #div2{
		  width:400px;
		  height:300px;
		  background-color: yellowgreen;
		  margin-left: auto;
		  margin-right: auto;
		  margin-top: 100px;
		  
	  }
	  .p{
		  width:50px;
		  height:45px;
		  line-height:40px;
		  background-color: #00A0E9;
		  text-align: center;
		  float: right;
		  margin-top: 0;
		 
	  }
    </style>
</head>
<body>
	<div id="div">
		<button id="bt">弹出层</button>
		<div id="div2" style="display: none;">
			<p id="p" class="p">关闭</p>
		</div>
	</div>

<script type="text/javascript">
var p=document.getElementById("p");
var bt=document.getElementById("bt");
var div=document.getElementById("div");
var div2=document.getElementById("div2")
bt.onclick=function(){
	div.className="opt";
	div2.style.display="block";
}
p.onclick=function(){
	div.className="";
	div2.style.display="none";
}
</script>
</body>
</html>